<template>
	<div class="line-chart">
		<div id="line"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "LineChart",
		props: ["reportsList"],
		data() {
			return {
				lineData: {},
			};
		},
		mounted() {
			// 基于准备好的dom，初始化echarts实例,还可以用refs
			var myChart = echarts.init(document.getElementById("line"));
			// console.log(this.reportsList)
			//深拷贝一下，生成两个不同的对象，不能直接写等于
			this.lineData = JSON.parse(JSON.stringify(this.reportsList));
			console.log('line',this.lineData)
			//给折线图设置上下左右的距离
			this.lineData.grid = {
				width:"80%",
				left:"20%",
				top:"30%"
			};
			this.lineData.title = {
				text: "折线图",
			};
			this.lineData.xAxis[0].axisLabel={
				interval:0,
				rotate:30,
				margin:15
			}
			this.lineData.legend.top="10%"
			//把折线图所属区域去掉
			this.lineData.series.forEach(e => {
				delete e.areaStyle,
				e.smooth=true
			});
			// this.lineData.grid.width = "80%";
			// this.lineData.grid.height = "80%";
			// this.lineData.grid.bottom = "10%";
			// this.lineData.grid.left = "10%";
			// this.lineData.grid.top="30%"
			// 绘制图表
			// myChart.setOption({
			// 	title: {
			// 		text: "折线图",
			// 	},
			// 	tooltip: {},
			// 	xAxis: {
			// 		data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
			// 	},
			// 	yAxis: {},
			// 	series: [
			// 		{
			// 			name: "销量",
			// 			type: "line",
			// 			data: [5, 20, 36, 10, 10, 20],
			// 		},
			// 	],
			// });
			myChart.setOption(this.lineData);
			window.LineChart = myChart;
			//  window.onresize=function(){
			//           myChart.resize()
			//       }
		},
	};
</script>

<style scoped lang="scss">
	#line {
		height: 300px;
	}
</style>